<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .basic{
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }
        .happy{
            background-color: red;
        }
        .sad{
            background-color: black;
        }
        .normal{
            background-color: gray;
        }

        .style1{
            background-color: red;
        }
        .style2{
            border-radius: 10px;
        }
        .style3{
            border: 2px solid yellow;
        }
    </style>
</head>

<body>

    <!-- 
        绑定样式 总结：
            1.class样式
                写法：class="xxx"   xxx可以是字符串/对象/数组.
                    字符串写法适用于：类名不确定,需要动态获取;
                    对象写法适用于：要绑定多个样式,个数不确定,名称也不确定;
                    数组写法适用于：要绑定多个样式,个数确定,名称也确定,但不确定要用哪几个
            2.style样式
                :style="{fontSize: xxx}"    其中xxx是动态值
                :style="[a,b]"  其中a、b是样式对象
     -->


    <div id ="app">
        <!-- 绑定class样式--字符串写法,适用于：样式的类名不确定,需要动态指定 -->
        <div class="basic" :class="mood" @click="changeMood">
            {{name}}
        </div>

        <br>
        <!-- 绑定class样式--数组写法,适用于：要绑定的样式个数不确定,名字也不确定 -->
        <div class="basic" :class="moodsArr" @click="changeStyles">
            {{name}}
        </div>

        <br>
        <!-- 绑定class样式--对象写法,适用于：要绑定的样式个数确定,名字也确定,需要动态决定用还是不用 -->
        <div class="basic" :class="moodObj">
            {{name}}
        </div>

        <br>
        <!-- 内联样式+对象绑定：对象中的key必须是CSS样式中包含的属性 -->
        <div class="basic" :style="styleObj">
            {{name}}
        </div>
    </div>

    <script>
        //创建Vue实例,得到 ViewModel
        const vm = new Vue({
            el: '#app',
            // 自定义属性
            data: {
                name:'测试',
                mood:'normal',
                moodsArr:[],
                moodObj:{
                    style1:true, // true表示应用样式
                    style2:true,
                    style3:true
                },
                styleObj:{
                    fontSize: '40px' // key必须是CSS样式中包含的属性
                }
            },
            // 自定义计算属性
            computed: {},
            // 自定义方法
            methods: {
                changeMood() {
                    const moodArr = ['happy', 'sad', 'normal']
                    let index = Math.floor(Math.random()*3)
                    this.mood = moodArr[index]
                },
                changeStyles() {
                    const moodArr = ['style1', 'style2', 'style3']
                    this.moodsArr = moodArr;
                    console.log(this.moodsArr);
                }
            }
        });
    </script>
</body>
</html>